@charset "UTF-8";
@font-face {
    font-family: 'MyriadProRegular';
    src: url('../font/crystal-webfont.eot');
    src: url('../font/crystal-webfont.eot?#iefix') format('embedded-opentype'), url('../font/crystal-webfont.woff') format('woff'), url('../font/crystal-webfont.ttf') format('truetype'), url('../font/crystal-webfont.svg#MyriadProRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {
    font-family: "MyriadProRegular", Arial, Thaoma, Helvetica, sans-serif;
}

html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

#footer {
    padding-top: 10px;
    padding-bottom: 4px;
    color: white;
    background-color: #0782b6;
}

#footer > p {
    margin-left:140px;
    margin-right:140px;
}

#footer > p > a:link {
    text-decoration: none;
    color:white;
}
#footer > p > a:visited {
    text-decoration: none;
    color:white;
}
#footer > p > a:hover {
    text-decoration: none;
    color:white;
}
#footer > p > a:active {
    text-decoration: none;
    color:white;
}

#footer > p > a:link {
    text-decoration: none;
    color:white;
}
#footer > p > span > a:link {
    text-decoration: none;
    color: white;
}
#footer > p > span > a:visited {
    text-decoration: none;
    color:white;
}
#footer > p > span > a:hover {
    text-decoration: none;
    color:white;
}
#footer > p > span > a:active {
    text-decoration: none;
    color:white;
}

.split-para      { display:block}
.split-para span { display:block;float:right;padding-right:15px;}

.btn-header{
    margin-top:8px;
    margin-left:30px;
}

.div_prop{
    text-align: center;
}

body{
    background-color: #dddddd;
}

.container-fluid {
    background-color: white;
    padding: 10px 50px 10px 50px ;
    margin-left:140px;
    margin-right:140px;
}

#titolo_header {
    color: #4a9abb;
    font-size: 20px;
    margin-top: 20px;
    text-align: right;
    line-height: 20px;
}

#titolo_header > span {
    font-size: 14px;
    font-style: italic;
}

#menu_header {
    margin-top: 32px;
    text-align: right;
    margin-left:auto;
    margin-right: 0px;
    width:100%;
}

.menu_item {
    float:right;
    padding-left: 40px;
}

#logo_crystal {
    /*height:80px;*/
    padding-left:0px;
}

.wb {
    background-color: white;
    padding: 20px ;
}

.navbar-default {
    margin-bottom: 0px;
}

.riga_tutorial {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: 0px;
    margin-right: 0px;
    background-color: #0e7797;
}

.titoli_index {
    color: #0782b6;
}

.nav-prop > li > a:hover,
.nav-prop > li > a:focus {
    color: #333333;
    border: 1px solid #9d9d9d;
    background-color: #dddddd;
    text-align: center;
}

.nav-prop > li > a {
    color: #333333;
    border: 1px solid #9d9d9d;
    text-decoration: none;
    text-align: center;
}

.navbar-brand {
    color: #0782b6!important;
}

h1 {
    margin-top:0px;
    margin-bottom: 30px;
}

h3 {
    margin-top: 10px;
}

.tabs-prop > li > a:hover,
.tabs-prop > li > a:active {
    color: #333333;
}

.tabs-prop > li > a {
    color: #333333;
}

.export-image {
    margin-left:14px;
    margin-right:14px;
}

.greek {
    width : 30px;
    height : 30px;
}

canvas {
    max-width: 100%;
    max-height: 100%;
}

.modal_wait {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
    url('http://i.stack.imgur.com/FhHRx.gif')
    50% 50%
    no-repeat;
}

body.loading {
    overflow: hidden;
}

body.loading .modal_wait {
    display: block;
}
 .input-group-btn {
     width:120px;
 }


.white_bg {
    background-color: white;
}

.backToTop {
    position: fixed;
    /* Fixed at page */
    top: auto;
    bottom: 50px;
    left: auto;
    right: 0px;
    background-color: transparent;
    color: white;
    padding: 5px;
    cursor: pointer;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

.gui_mode {
    background-color: white;
}

/*Large dropdown menu*/
/*START*/
.dropdown-large {
    position: static !important;
}
.dropdown-menu-large {
    margin-left: -300px;
    margin-right: 16px;
    padding: 20px 0px;
    width: 1100px;
}
.dropdown-menu-large > li > ul {
    padding: 0;
    margin: 0;
}
.dropdown-menu-large > li > ul > li {
    list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
    color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
    color: #428bca;
    font-size: 18px;
}
@media (max-width: 768px) {
    .dropdown-menu-large {
        margin-left: 0 ;
        margin-right: 0 ;
    }
    .dropdown-menu-large > li {
        margin-bottom: 30px;
    }
    .dropdown-menu-large > li:last-child {
        margin-bottom: 0;
    }
    .dropdown-menu-large .dropdown-header {
        padding: 3px 15px !important;
    }
}

/*END*/

/*MARGHERITA*/
/*START*/
.selector {
    position: relative;
    left: 0;
    top: 0%;
    width: 690px;
    height: 690px;
    margin-top: 35px;
    margin-left: 10px;
    margin-bottom: 20px;
}

/*PER SPOSTARE IL CENTRO DELLA MARGHERITA*/
.bottone_margherita, .bottone_margherita:disabled {
    background-image: url("../img/logo_2_no_sfondo.png")!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    cursor: pointer;
    /*background-size: contain!important;*/
    position: absolute;
    width: 220px;
    height: 220px;
    margin-left: 320px;
    margin-top: 245px;
    /*background: #4a9bbf;*/
    background: #f0f0f0;
    border-radius: 50%;
    border: 0;
    color: white;
    font-size: 20px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    transition: all .1s;
    font-weight:bold;
}

/*PER SPOSTARE I PETALI DELLA MARGHERITA*/
.selector ul {
    position: absolute;
    list-style: none;
    padding: 50px;
    margin: 0;
    top:170px;
    right: -20px;
    bottom: -20px;
    left:49px;
}

.selector li {
    position: absolute;
    width: 0;
    height: 50%;
    margin: 0 50%;
    -webkit-transform: rotate(-360deg);
    transition: all 0.8s ease-in-out;
}

.selector li input {
    display: none;
}

.selector li input + label {
    position: relative;
    left: 80%;
    bottom: 100%;
    width: 0;
    height: 0;
    line-height: 1px;
    margin-left: 100px;
    background: #f9f9f9;
    border-radius: 50%;
    text-align: center;
    font-size: 5px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

.selector li input + label:hover {
    color: white;
}

.selector.open li input + label {
    width: 200px;
    height: 200px;
    line-height: 30px;
    margin: 0px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

#content1 {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
    margin-left:80px;
    margin-top: -80px;
}

#content1 > a:hover {
    background-color: #97c2cd;
}

#content2 {
    -ms-transform: rotate(39.4286deg); /* IE 9 */
    -webkit-transform: rotate(39.4286deg); /* Safari */
    transform: rotate(39.4286deg);
    margin-top: -50px;
    margin-left: 250px;
}

#content2 > a:hover {
    background-color: #7fbf7f;
}

#content3 {
    -ms-transform: rotate(-12.857deg); /* IE 9 */
    -webkit-transform: rotate(-12.857deg); /* Safari */
    transform: rotate(-12.857deg);
    margin-left: 320px;
    margin-top: -250px;
}

#content3 > a:hover {
    background-color: #a4a194;
}

#content4 {
    -ms-transform: rotate(-64.286deg); /* IE 9 */
    -webkit-transform: rotate(-64.286deg); /* Safari */
    transform: rotate(-64.286deg);
    margin-left: 260px;
    margin-top: -360px;
}

#content4 > a:hover {
    background-color: #7f7fc7;
}

#content5 {
    -ms-transform: rotate(-115.714deg); /* IE 9 */
    -webkit-transform: rotate(-115.714deg); /* Safari */
    transform: rotate(-115.714deg);
    margin-left: 100px;
    margin-top: -420px;
}

#content5 > a:hover {
    background-color: #bf7f7f;
}

#content6 {
    -ms-transform: rotate(-167.143deg); /* IE 9 */
    -webkit-transform: rotate(-167.143deg); /* Safari */
    transform: rotate(-167.143deg);
    margin-left: -50px;
    margin-top: -230px;
}

#content6 > a:hover {
    background-color: #ffb27f;
}

#content7 {
    -ms-transform: rotate(-218.571deg); /* IE 9 */
    -webkit-transform: rotate(-218.571deg); /* Safari */
    transform: rotate(-218.571deg);
    margin-left: -10px;
    margin-top: -120px;
}

#content7 > a:hover {
    background-color: #ff7f7f;
}

.dropdown1 {
    margin-top: 47px;
}

.paragrafo_petali {
    font-size: 20px;
    font-weight: 600;
}

.sez1 {
    background-image:url("../img/get_acqu.png")!important;
    background-repeat: no-repeat!important;
    /*background-size: 150px 150px!important;*/
}

.sez1:hover {
    background-color: #31859c;
    background-image: none!important;
}

.sez2 {
    background-image:url("../img/basic.png")!important;
    background-repeat: no-repeat!important;
    /*background-size: 150px 150px!important;*/
}

.sez2:hover {
    background-color: #008000;
    background-image: none!important;
}

.sez3 {
    background-image:url("../img/howtomodel.png")!important;
    background-repeat: no-repeat!important;
    /*background-size: 150px 150px!important;*/
}

.sez3:hover {
    background-color: #4a452a;
    background-image: none!important;
}

.sez4 {
    background-image:url("../img/oneelectr.png")!important;
    background-repeat: no-repeat!important;
    /*background-size: 150px 150px!important;*/
}

.sez4:hover {
    background-color: #000090;
    background-image: none!important;
}

.sez5 {
    background-image:url("../img/lattice.png")!important;
    background-repeat: no-repeat!important;
    /*background-size: 150px 150px!important;*/
}

.sez5:hover {
    background-color: #800000;
    background-image: none!important;
}

.sez6 {
    background-image:url("../img/response.png")!important;
    background-repeat: no-repeat!important;
    /*background-size: 150px 150px!important;*/
}

.sez6:hover {
    background-color: #ff6600;
    background-image: none!important;
}

.sez7 {
    background-image:url("../img/advance.png")!important;
    background-repeat: no-repeat!important;
    /*background-size: 150px 150px!important;*/
}

.sez7:hover {
    background-color: #ff0000;
    background-image: none!important;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left:200px;
    overflow:auto;
    margin-top: -150px;
    width:250px;
}

.dropdown-content1 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content1 a:hover {
    background-color: #cccccc;
    color: white;
}

.dropdown:hover .dropdown-content1 {
    display: block;
}

.bottoni {
    background-color: #cccccc;
}
.bottoni:hover {
    z-index: 10!important;
}
/*END*/

/*PROPRIETÀ PAGINE TUTORIAL*/
/*START*/

.titoli_sezioni {
    margin-bottom:5px;
    margin-top:5px;
    color: #337ab7;
    font-size:28px;
}

.titoli_sottosezioni {
    margin-bottom:5px;
    margin-top:5px;
    color: #337ab7;
    font-size:22px;
}

.titoli_sottosottosezioni {
    margin-bottom:5px;
    margin-top:5px;
    color: #337ab7;
    font-size:16px;
}

/*SEZIONE 1: GET ACQUAINTED WITH CRYSTAL*/

.titolo_tutorial {
    color:#31859c;
    font-size:35px;
}

.autore_tutorial {
    color:#31859c;
    font-size:25px;
    font-style: italic;
}

/*SEZIONE 2: BASIC OPTIONS*/
.titolo_tutorial2 {
    color:#008000;
    font-size:35px;
}

.autore_tutorial2 {
    color:#008000;
    font-size:25px;
    font-style: italic;
}

/*SEZIONE 3: HOW TO MODEL*/
.titolo_tutorial3 {
    color:#4a452a;
    font-size:35px;
}

.autore_tutorial3 {
    color:#4a452a;
    font-size:25px;
    font-style: italic;
}

/*SEZIONE 4: ONE ELECTRON PROPERTIES*/
.titolo_tutorial4 {
    color:#000090;
    font-size:35px;
}

.autore_tutorial4 {
    color:#000090;
    font-size:25px;
    font-style: italic;
}

/*SEZIONE 5: LATTICE DYNAMICS AND THERMODYNAMICS*/
.titolo_tutorial5 {
    color:#800000;
    font-size:35px;
}

.autore_tutorial5 {
    color:#800000;
    font-size:25px;
    font-style: italic;
}

/*SEZIONE 6: RESPONSE PROPERTIES*/
.titolo_tutorial6 {
    color:#ff6600;
    font-size:35px;
}

.autore_tutorial6 {
    color:#ff6600;
    font-size:25px;
    font-style: italic;
}

/*SEZIONE 6: ADVANCED PROPERTIES*/
.titolo_tutorial7 {
    color:#ff0000;
    font-size:35px;
}

.autore_tutorial7 {
    color:#ff0000;
    font-size:25px;
    font-style: italic;
}

.noBorder {
    border:none !important;
}

.tabelle_generiche{
    width: 90%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.linea_divisoria {
    background-color: #dddddd!important;
    width: 100%;
    height: 1px;
    margin-bottom: 10px;
}

.tabelle_generiche > th, td {
    border-bottom: 1px solid #ddd;
}

.tab_linea_tratteggiata {
    width: 90%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.tabelle_similcodice {
    background-color: #f5f5f5;
    border: 1px solid #dddddd;
    width: 90%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:0px;
}

.tabelle_codice {
    background-color: #aaa;
    width: 90%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:0px;
}

.codice {
    margin: 0 0 0px;
}
/*END*/

/*MENU A SINISTRA*/
/*START*/

.sx_1 {
   background-color: #97c2cd;
}

.sx_1:hover {
    background-color: #31859c;
}

.sx_2 {
    background-color: #7fbf7f;
}

.sx_2:hover {
    background-color: #008000;
}

.sx_3 {
    background-color: #a4a194;
}

.sx_3:hover {
    background-color: #4a452a;
}

.sx_4 {
    background-color: #7f7fc7;
}

.sx_4:hover {
    background-color: #000090;
}

.sx_5 {
    background-color: #bf7f7f;
}

.sx_5:hover {
    background-color: #800000;
}

.sx_6 {
    background-color: #ffb27f;
}

.sx_6:hover {
    background-color: #ff6600;
}

.sx_7 {
    background-color: #ff7f7f;
}

.sx_7:hover {
    background-color: #ff0000;
}

.cont_sx_1 > a:hover {
    background-color: #97c2cd;
}

.cont_sx_2 > a:hover {
    background-color: #7fbf7f;
}

.cont_sx_3 > a:hover {
    background-color: #a4a194;
}

.cont_sx_4 > a:hover {
    background-color: #7f7fc7;
}

.cont_sx_5 > a:hover {
    background-color: #bf7f7f;
}

.cont_sx_6 > a:hover {
    background-color: #ffb27f;
}

.cont_sx_7 > a:hover {
    background-color: #ff7f7f;
}

.dropbtn_menu_sx {
    color: white;
    padding: 16px;
    margin-bottom: 5px;
    font-size: 13px;
    border: none;
    height: 100px;
    width: 100px;
    border-radius: 45%;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f0f0f0;
    min-width: 100%;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    z-index: 1;
    margin-left:100px;
    overflow:auto;
    top: 0px;
    width: 200px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}
/*END*/

/*TASTO PER TORNARE ALL'NIZIO DELLA PAGINA*/
/*START*/
#return-to-top {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}
/*END*/